<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            html{
                overflow: hidden;
            }
            body{
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background: linear-gradient(to top,#4d627c 0%,#8997a9 100%);
                font-size: 4em;
                color: #333;
                text-align: center;
            }
            div{
                margin-top: 15%;
                display: flex;
                flex-direction: column;
                align-items: center;
                /* height: 604px; */
            }
            .title{
                font-size: 52px;
                text-transform: uppercase;
                letter-spacing: 5px;
                transform: rotate(-10deg);
                display: flex;
                height: 100px;
            }
            .title span{
                opacity: 0;
                transform: skew(-10deg);
                text-shadow: 1px 1px #553d4a,2px 2px #553d4a,3px 3px #405166,4px 4px #405166,5px 5px #405166,6px 6px #405166;
                animation: move 1s cubic-bezier(0.15, 0.22, 0.39, 1.42) forwards var(--delay);
            }
            @keyframes move {
                from{
                    opacity: 0;
                    transform: skew(-10deg) translateY(300px);
                }
                to{
                    opacity: 1;
                    transform: skew(-10deg) translateY(0);
                }
            }
            .title:nth-child(1){
                color: #78a452;
            }
            .title:nth-child(2){
                color: #528aa4;
            }   
            .title:nth-child(3){
                color: #ddaa2a;
            }
        </style>
	</head>
	<body>
        <div>
            <p class="title">One of the biggest challenges that</p>
            <p class="title">english learners face is not</p>
            <p class="title">knowing how to study english.</p>
        </div>
        <script>
            document.querySelectorAll(".title").forEach((title)=>{
                title.innerHTML=title.textContent.split('').map((c)=>`<span class="letter">${c.trim()?c:'&nbsp'}</span>`).join('');
            })
            const letters=document.querySelectorAll(".letter");
            for(let i=0;i<letters.length;i++){
                letters[i].style.setProperty('--delay',`${i*0.1}s`);
            }
        </script>
	</body>
</html>